<template>
    <div class="run-menu-item" v-if="hasChildren">
        <el-submenu :index="menuItem[props.index]">
            <template slot="title">
                <!-- 第一级菜单才显示图标 -->
                <template v-if="isRoot">
                    <i v-if="menuItem[props.iconName]" :class="menuItem[props.iconName]"></i>
                    <i v-else class="el-icon-menu"></i>
                </template>
                <span>{{menuItem[props.label]}}</span>
            </template>
            <!-- 收起状态 -->
            <el-menu-item-group v-if="isGroup">
                <span slot="title">{{menuItem[props.label]}}</span>
                <run-menu-item
                    v-for="submenu in menuItem[props.children]"
                    :menu-item="submenu"
                    :key="submenu[props.index]"
                    :is-group="isGroup"
                    :props="props"
                ></run-menu-item>
            </el-menu-item-group>
            <run-menu-item v-else
                v-for="submenu in menuItem[props.children]"
                :menu-item="submenu"
                :key="submenu[props.index]"
                :is-group="isGroup"
                :props="props"
            ></run-menu-item>
        </el-submenu>
    </div>
    
    <el-menu-item v-else :index="menuItem[props.index]" @click.native="onSelectMenu">
        <template v-if="isRoot">
            <i v-if="menuItem[props.iconName]" :class="menuItem[props.iconName]"></i>
            <i v-else class="el-icon-menu"></i>
        </template>
        <template slot="title">
            <span>{{menuItem[props.label]}}</span>
        </template>
    </el-menu-item>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';

export default {
    name: 'run-menu-item',
    props: {
        menuItem: {
            type: Object,
            required: true
        },
        isRoot: {
            type: Boolean,
            default: false
        },
        isGroup: {
            type: Boolean,
            default: false
        },
        props: {
            type: Object,
            default: () => {
                return {
                    label: 'name',
                    children: 'children',
                    disabled: 'disabled',
                    index: 'code',
                    iconName: 'icon',
                    link: 'link'
                }
            }
        },
    },
    computed: {
        ...mapGetters('menu', [
            'activeIndex',
            'currentMenu'
        ]),
        hasChildren () {
            return this.menuItem[this.props.children] && this.menuItem[this.props.children].length ? true : false;
        }
    },
    methods: {
        ...mapActions('menu', [
            'setActiveIndex',
            'setCurrentMenu',
        ]),
        onSelectMenu () {
            if(this.activeIndex === this.menuItem[this.props.index]) return;

            this.setActiveIndex(this.menuItem[this.props.index]);
            this.setCurrentMenu(this.menuItem);

            let toPathName = '', toPath = this.menuItem[this.props.link];
            let splitIndex = toPath ? toPath.indexOf('#') : -1;
            
            if (splitIndex > -1) {
                toPathName = toPath.slice(0, splitIndex);
                toPath = toPath.slice(splitIndex + 1);
            }
            // console.log(toPathName,location.pathname)
            let localPathName = location.pathname === '/' ? '/index.html' : location.pathname;
            if(!!this.menuItem[this.props.link] && toPathName.indexOf(localPathName)===-1){
                this.$utils.innerRedirect(`${this.menuItem[this.props.link]}`)
                return;
            }

            this.$router.push({
                path: toPath || '/404',
            })
        }
    }
}
</script>